<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
// 引入组件
import Transmitter from './Transmitter.vue'
import Receiver from './Receiver.vue'
import DSCDemodulator from './DSCDemodulator.vue'
import Account from './Account.vue'
import AlarmSearch from './AlarmSearch.vue'
import { dayjs } from 'element-plus';

// const testtime = ref(dayjs().format('YYYY-MM-DD'))

// ------------ 实时时间 ------------
const time = ref(dayjs().format('YYYY-MM-DD'));

const updateDate = () => {
    time.value = dayjs().format('YYYY-MM-DD');
};

onMounted(() => {
    const dateInterval = setInterval(updateDate, 1000);
    onUnmounted(() => {
        clearInterval(dateInterval);
    });
});


// ------------ 导航栏 ------------
const handleClick = (tab, event) => {
    console.log(tab, event);
};
const activeName = ref('Transmitter');
</script>

<template>
    <div>
        <!-- {{ testtime }} -->
        <el-container>
            <!-- 头部信息 -->
            <el-header
                style="font-size: large; display: flex;align-items: center;justify-content: space-between; border-bottom: 1px solid #dcdfe6;background-color: #003366;color: white;">
                <div>收 / 发信接收监控系统</div>
                <div style="font-size: 40px;">广州海岸电台</div>
                <div>{{ time }}</div>
            </el-header>

            <!-- 主体 -->
            <el-main>
                <!-- 卡片 -->
                <el-card class="box-card">
                    <el-tabs type="border-card" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="发射机" name="Transmitter">
                            <Transmitter />
                        </el-tab-pane>
                        <el-tab-pane label="接收机" name="Receiver">
                            <Receiver />
                        </el-tab-pane>
                        <el-tab-pane label="DSC解调器" name="DSCDemodulator">
                            <DSCDemodulator />
                        </el-tab-pane>
                        <el-tab-pane label="账户" name="Account">
                            <Account />
                        </el-tab-pane>
                        <el-tab-pane label="报警查询" name="AlarmSearch">
                            <AlarmSearch />
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-main>
        </el-container>
    </div>
</template>

<style scoped>
/* .box-card{
    width: 100%;
} */
/* 当宽度大于992px时，设置宽度为50% */
@media (min-width: 1234px) {
    .box-card{
        margin: 0 auto;
        width: 75%;
    }
}
@media (min-width: 2048px) {
    .box-card{
        margin: 0 auto;
        width: 60%;
    }
}
</style>